<!-- 热力图 -->
<template>
  <div class="heat-map">
    <div class="title">
      2020年5月销售日历热力图
    </div>
    <div class="map" ref="chart">

    </div>
  </div>
</template>

<script>
export default {
  // 接受父组件传来的 热力图 的数据
  props:['pieces','virtul'],
  //图表实例
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //2.基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        visualMap: {
          pieces: this.pieces,
          type: 'piecewise',
          orient: 'vertical',
          right: 10,
          top: 'center'
        },
        calendar: {
          orient: 'vertical',
          range: '2020-5',
          dayLabel: {
            firstDay: 1 // 从周一开始
          },
          left: 100,
          right: 300,
          cellSize: ['auto', 25],
          yearLabel: { color: "#000" }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          valueFormatter: (value) => (value / 10000).toFixed(2) + '万',
          textStyle: {
            color: '#fefdfd'
          }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: this.virtul
        }

      };
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.heat-map {
  width: 100%;
  height: 270px;
  background-color: #ffffff;
  margin-bottom: 15px;

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }

  .map {
    height: 230px;
    width: 100%;
  }
}
</style>